<script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: '600', height: '30px', theme: theme });
                $("#jqxMenu").css('visibility', 'visible');
                $("#disabled").jqxCheckBox({ theme: theme, width: '150px', height: '20px' });
                $("#open").jqxCheckBox({ theme: theme, width: '150px', height: '20px' });
                $("#hover").jqxCheckBox({ theme: theme, width: '150px', height: '20px' });
                $("#topLevelArrows").jqxCheckBox({ theme: theme, width: '200px', height: '20px' });
                $("#animation").jqxCheckBox({ theme: theme, width: '150px', height: '20px' });

                $("#animation").on('change', function (event) {
                    var value = event.args.checked;
                    // enable or disable the menu's animation.
                    if (!value) {
                        $("#jqxMenu").jqxMenu({ animationShowDuration: 0, animationHideDuration: 0, animationShowDelay: 0 });
                    }
                    else {
                        $("#jqxMenu").jqxMenu({ animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 });
                    }
                });

                $("#disabled").on('change', function (event) {
                    var value = event.args.checked;
                    // enable or disable the menu
                    if (!value) {
                        $("#jqxMenu").jqxMenu({ disabled: false });
                    }
                    else {
                        $("#jqxMenu").jqxMenu({ disabled: true });
                    }
                });

                $("#hover").on('change', function (event) {
                    var value = event.args.checked;
                    // enable or disable the menu's hover effect.
                    if (!value) {
                        $("#jqxMenu").jqxMenu({ enableHover: false });
                    }
                    else {
                        $("#jqxMenu").jqxMenu({ enableHover: true });
                    }
                });

                $("#open").on('change', function (event) {
                    var value = event.args.checked;
                    // enable or disable the opening of the top level menu items when the user hovers them.
                    if (!value) {
                        $("#jqxMenu").jqxMenu({ autoOpen: false });
                    }
                    else {
                        $("#jqxMenu").jqxMenu({ autoOpen: true });
                    }
                });
                $("#topLevelArrows").on('change', function (event) {
                    var value = event.args.checked;
                    // enable or disable the opening of the top level menu items when the user hovers them.
                    if (!value) {
                        $("#jqxMenu").jqxMenu({ showTopLevelArrows: false });
                    }
                    else {
                        $("#jqxMenu").jqxMenu({ showTopLevelArrows: true });
                    }
                });
            });
</script>
        
        
    
<div id='menubar'>
        <div id='jqxWidget' style='height: 45px;'>
            <div id='jqxMenu' style='visibility: hidden; margin-left: 5px;'>
                MENU
                <ul>  <!-- Main UL -->
            <?php
            $submenu = $menu;
            
            foreach ($menu as $value) {
                if ($value["parent"] == 'none') {
                    echo '<li><a href="'.$value["url"].'">'.$value["name"].'</a> ';
                    $parent = $value["name"];
                    if (hassubmenu($submenu, $parent)) {
                     // echo '<script type="text/javascript"> alert("SQL : '. var_dump($submenu) . '"); </script>;'; 
                      echo "<ul> <!-- sub UL -->";  
                      foreach ($submenu as $sub) {
                        if ($sub['parent'] == $value["name"] )  
                        {
                            echo '<li><a href="'. $sub["url"].'">'.$sub["name"].'</a></li> ';
                        }
                       // echo "</li> <!-- EO main LI -->";  // closes the header
                    }
               echo "</ul> <!-- EO sub UL -->";
               }  else { echo "</li> <!-- EO main LI -->"; }// closes the header 
             }
           }  
           echo "</ul> <!-- end of main UL -->";  
?>       
            </div> <!-- jqxMenu -->
        </div> <!-- jqxWidget -->
    </div> <!-- menubar -->
    
 

<?php 
function hassubmenu ($list, $head) {
   // checks to see if the top level menu has children
   // teturns true if there are children
   $result = FALSE;
    foreach ($list as $var) {
         if ($var['parent'] == $head ) $result = TRUE;
             }
   return $result;          
}
        
?>
